<!DOCTYPE HTML>
<html ng-app="Amail">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        *{margin:0;padding:0;}
        html,body{width: 100%;height: 100%;}
        canvas{display: block;}
        body{background:#000;}
        canvas{background:#fff;}
    </style>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var canvas=$("#canvas");
            canvas.attr("width",$(window).width());
            canvas.attr("height",$(window).height());
            var context=canvas.get(0).getContext("2d");
            context.fillRect(150,150,100,100);
            context.translate(150,150);
            context.fillStyle="rgb(255,0,0)";
            context.fillRect(150,150,100,100);

        })
    </script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>